<template>
  <div class="footer">
    <!-- 上半部分 -->
    <div class="footer-top">
      <!-- 特色服务区域 -->
      <div class="service-features">
        <div class="feature-item">
          <div class="feature-icon">
            <TheIcon icon="shipping" size="40" />
          </div>
          <span class="feature-desc">多倉發貨</span>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <TheIcon icon="card" size="40" />
          </div>
          <span class="feature-desc">快捷支付</span>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <TheIcon icon="return" size="40" />
          </div>
          <span class="feature-desc">急速退換</span>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <TheIcon icon="time-24" size="40" />
          </div>
          <span class="feature-desc">人工客服</span>
        </div>
      </div>
    </div>
    <!-- 下半部分 -->
    <div class="footer-bottom">
      <!-- 主要内容区域 -->
      <div class="footer-main">
        <!-- logo -->
        <div class="logo-section">
          <img
            src="~/assets/logo/logo-light-gold.png"
            alt="家具商城"
            class="footer-logo"
          />
        </div>
        <!-- 公司地址 -->
        <div class="footer-address">
          <div class="contact-info">
            <div class="contact-item">
              <i class="iconfont icon-dianhua icon"></i>
              <span>聯系電話：+852 67189724</span>
            </div>
            <div class="contact-item">
              <i class="iconfont icon-email icon"></i>
              <span>service@furniture.com.tw</span>
            </div>
            <div class="contact-item">
              <span>地址：火炭山尾街 19-25 號宇宙工業中心 12 樓 C07 室</span>
            </div>
          </div>
        </div>
        <!-- 導航欄 -->
        <div class="footer-nav">
          <ul class="nav-links">
            <li>
              <nuxt-link
                :to="{ path: '/goods_cate', query: { id: 1 } }"
                @click.native="scrollToTop"
                >前往商城</nuxt-link
              >
            </li>
            <li>
              <nuxt-link
                :to="{ path: '/news_detail', query: { id: 2 } }"
                @click.native="scrollToTop"
                >售後政策</nuxt-link
              >
            </li>
            <li>
              <nuxt-link
                :to="{ path: '/news_detail', query: { id: 3 } }"
                @click.native="scrollToTop"
                >物流政策</nuxt-link
              >
            </li>
            <li>
              <nuxt-link
                :to="{ path: '/news_detail', query: { id: 4 } }"
                @click.native="scrollToTop"
                >隱私政策</nuxt-link
              >
            </li>
            <li>
              <nuxt-link to="/about_us" @click.native="scrollToTop"
                >關於我們</nuxt-link
              >
            </li>
          </ul>
        </div>
      </div>
      <!-- 底部版权信息 -->
      <div class="footer-copyright">
        <div class="copyright">
          <span> &copy; 2025 家具商城. All rights reserved. </span>
        </div>
        <div class="social-icons">
          <a href="#" class="social-icon">
            <i class="iconfont icon-facebook"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-tuite"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-instagram"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-linkedin"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-whatsapp"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TheIcon from "@/components/TheIcon";
export default {
  name: "footers",
  components: {
    TheIcon,
  },
  data() {
    return {
      codeUrl: "",
      iScode: false,
    };
  },
  head() {
    return {
      meta: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    scrollToTop() {
      // 強制滾動到頁面頂部
      window.scrollTo(0, 0);
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
    },
  },
};
</script>

<style scoped lang="scss">
@import "~/assets/fonts/iconfont.css";

.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  letter-spacing: 1px;

  // 上半部分
  .footer-top {
    position: relative;
    flex: 0 0 25vh;
    background: $gold-accent;

    .service-features {
      max-width: 1200px;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      bottom: 12%;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-around;
      width: 100%;
      z-index: 2;

      .feature-item {
        text-align: center;
        color: $pure-white;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        height: 160px;
        width: 160px;
        border-radius: 50%;

        .feature-desc {
          font-size: 14px;
          line-height: 1.4;
          color: rgba(255, 255, 255, 0.9);
          position: relative;
          z-index: 1;
          margin-bottom: 4px;
          font-weight: 500;

          &:first-of-type {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
          }
        }

        .feature-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 72px;
          height: 72px;
          border-radius: 50%;
          margin: 0 auto;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
          z-index: 1;

          svg {
            width: 36px;
            height: 36px;
            stroke: $pure-white;
            stroke-width: 2;
          }
        }

        &:hover {
          box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);
          transform: translateY(-2px);
        }
      }
    }
  }
}

// 下半部分
.footer-bottom {
  color: $pure-white;
  background-color: $obsidian;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px 0;

  // 主要内容区域
  .footer-main {
    padding: 0 min(100px, 8vw);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    // logo
    .footer-logo {
      height: 80px;
      margin: 40px 0;
    }

    // 地址
    .footer-address {
      text-align: center;
      font-size: 14px;
      line-height: 1.4;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 20px;
      .iconfont {
        margin-right: 10px;
      }

      .contact-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
      }
    }

    // 導航欄樣式
    .footer-nav {
      display: flex;
      align-items: center;
      margin: 20px 0;

      .nav-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 30px;

        li {
          a {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            transition: all 0.3s ease;
            position: relative;

            &:hover {
              color: $dark-gold;
            }

            &:after {
              content: "";
              position: absolute;
              bottom: -4px;
              left: 0;
              width: 0;
              height: 1px;
              background-color: $dark-gold;
              transition: width 0.3s ease;
            }

            &:hover:after {
              width: 100%;
            }
          }
        }

        @media (max-width: 768px) {
          flex-direction: column;
          gap: 15px;
        }
      }
    }
  }
}

.footer-copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  padding: 0 min(100px, 8vw);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: min(100px, 8vw);
    right: min(100px, 8vw);
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .copyright {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
  }

  .social-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;

    .social-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      transition: all 0.3s ease;
      color: rgba(255, 255, 255, 0.7);

      &:hover {
        background: $dark-gold;
        color: $pure-white;
        transform: translateY(-2px);
      }

      .iconfont {
        font-size: 14px;
      }
    }
  }
}
</style>
